<template>
  <div class="login">
    <!-- 登录面板 -->
    <el-card>
      <img class="loginImg" src="~@/assets/logo.png" alt="" />
      <el-form>
        <el-form-item>
          <el-input v-model="mobile" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="code" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox>我已阅读并同意 [用户协议] 和 [隐私条款]</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      mobile: '',
      code: '',
      isCheck: []
    }
  }
}
</script>

<style lang="less" scoped>
body {
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: url('~@/assets/login.png');
    background-size: 100%;
    .el-card {
      width: 460px;
      padding: 0 20px;
      .loginImg {
        display: block;
        width: 200px;
        margin: 0 auto;
      }
      .el-checkbox {
        color: #09f;
      }
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
